<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买页面</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <a href="show_list.html">返回</a>
        <h1>商品购买信息</h1>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="商品id"></el-table-column>
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="price" label="商品价格"></el-table-column>
            <el-table-column prop="num" label="购买数量"></el-table-column>
            <el-table-column prop="totalDmount" label="总金额"></el-table-column>
        </el-table>
        <h1>订单信息</h1>
        <el-form :model="form" label-width="80px">
            <el-form-item label="商品id">
                <el-input v-model="form.productId" readonly></el-input>
            </el-form-item>
            <el-form-item label="订单日期">
                <el-date-picker v-model="form.orderDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="确认商品数量">
                <el-input v-model="form.totalQuantity" ></el-input>
            </el-form-item>
            <el-form-item label="总金额">
                <el-input v-model="form.totalDmount" readonly></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                stock: '',
                form: {
                    productId: '',
                    orderDate: '',
                    totalQuantity: '',
                    totalDmount: ''
                },
                tableData: [{
                    id: '',
                    name: '',
                    price: '',
                    num: '',
                    totalDmount: ''
                }]
            },
            created() {
                this.getProductInfo();
            },
            methods: {
                //获取商品信息
                getProductInfo() {
                    // 获取 URL 中的 id 参数
                    const urlParams = new URLSearchParams(window.location.search);
                    this.form.productId = urlParams.get('id'); // 这是商品ID
                    this.tableData[0].id = this.form.productId;
                    this.form.totalQuantity = parseInt(urlParams.get('num'), 10); // 转换为整数
                    this.tableData[0].num = this.form.totalQuantity;
                    this.stock = parseInt(urlParams.get('stock'), 10) - this.form.totalQuantity;
                    // 根据 id 获取商品信息
                    axios.get('/product/pro_query', {
                        params: {
                            id: this.tableData[0].id
                        }
                    })
                       .then(response => {
                           this.tableData[0].name = response.data.name;
                           this.tableData[0].price = response.data.price;
                           this.tableData[0].totalDmount = (response.data.price * this.tableData[0].num).toFixed(2); // 格式化总金额
                           this.form.totalDmount = this.tableData[0].totalDmount;
                       })
                       .catch(error => {
                            console.log(error);
                            alert('获取商品信息失败');
                        });
                },
                //修改库存
                modifyInventory() {
                    // 根据 id 修改库存
                    console.log(this.stock);
                    if (this.stock < 0) {
                        alert('库存不足');
                        return;
                    }
                    axios.post('/product/pro_update', {
                        id: this.form.productId,
                        stock: this.stock,
                        price: this.tableData[0].price
                    })
                        .then(response => {
                            console.log(response.data);
                            alert('修改库存成功');
                        })
                        .catch(error => {
                            console.log(error);
                            alert('修改库存失败');
                        });
                },
                submitForm() {
                    this.$confirm('确认提交订单吗？')
                       .then(() => {
                            axios.post('/customer/get')
                               .then(response => {
                                    if (response.data !== null){
                                        const customerId = response.data;
                                        axios.post('/orders/create',{
                                            productId: this.form.productId,
                                            customerId: customerId,
                                            orderDate: this.form.orderDate,
                                            totalQuantity: this.form.totalQuantity,
                                            totalDmount: this.form.totalDmount
                                        })
                                            .then(response => {
                                                console.log(response.data);
                                                this.modifyInventory();
                                                alert('购买成功');
                                                window.location.href = 'show_list.html';
                                            })
                                            .catch(error => {
                                                console.log(error);
                                                alert('购买失败');
                                            });
                                    }
                                    else{
                                        alert('请先登录');
                                    }
                                })
                               .catch(error => {
                                    console.log(error);
                                    alert('订单提交失败');
                                });
                       })
                       .catch(() => {
                            // 用户取消操作
                           this.$message({
                            type: 'info',
                            message: '订单取消'
                           });
                       });
                }
            }
        })
    </script>
</body>
</html>